<!-- 大屏抽奖 -->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        shadow="never"
        body-style="padding: 22px;"
      >
        <div class="tiktok-title">大屏抽奖</div>

        <el-row :gutter="15" class="row-cls">
          <el-col :xs="8" :sm="8" :lg="8" :xl="8" v-for="(i,j) in list" :key="j">
            <div class="flex-column screen-num">
              <span>{{i.text}}</span>
              <div>{{i.num}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="大屏名称:" prop="displayName" class="width80">
              <el-input
                v-model="form.largeScreenName"
                placeholder="请输入大屏名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="发布渠道:" prop="displayName" class="width80">
              <el-select
                v-model="form.releaseChannel"
                placeholder="请选择发布渠道"
                class="ele-block"
                clearable
              >
                <!--1_抖音 2_快手-->
                <el-option label="D音" :value="1" />
                <el-option label="K手" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="创建时间:" prop="datetime" class="width80">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card class="m-top10 p-algin10" shadow="never">
<!--              @largeCount="largeCount"
-->
      <table-list
        ref="table"
        :screenForm="form"
      />
    </el-card>
  </div>
</template>

<script>
  import { screenCount} from "@/api/explosiveCode/largeScreenLottery";
  import tableList from './components/table-list.vue';
  export default {
    name: "index",
    components: {tableList},
    data() {
      return {
        form: {},
        datetime:[],
        list:[
          {
            text:'大屏数量',
            num:0
          },{
            text:'中奖人数',
            num:0
          },{
            text:'参与人数',
            num:0
          },
        ]

      }
    },
    // 路由刷新
    activated(){
      sessionStorage.setItem('isDatamonitor', false)
      console.log('进入isDatamonitor缓存为falsefalsefalse')

      // localStorage.setItem('isDatamonitor', false);
      console.log("进入大屏抽奖activated===========")
      this.init()
    },
    methods:{
      init(){
        screenCount({
          merchantId: this.$store.state.user.info.merchantId,  // 商户id
        })
          .then((data) => {
            console.log("进入大屏count=====",data)
            this.list[0].num=data.logManagementMapperCount  //大屏数量（需调用接口查总数，需修改）
            this.list[1].num=data.largeScreenWinnersCount   //中奖人数
            this.list[2].num=data.largeScreenChecksCount    //参与人数
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      largeCount(num){
        this.list[0].num=num  //大屏数量（需调用接口查总数，需修改）
      },

      see(){
        if(!this.form.largeScreenName){
          delete this.form.largeScreenName
        }
        if(!this.datetime){
          delete this.form.startTime
          delete this.form.endTime
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      resetting(){
        this.datetime=[]
        this.form={}
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      // 日期选择
      select(e){
        if(this.datetime){
          console.log("日期选择e============",e,'form.datetime',this.datetime)
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
    }

  }
</script>

<style scoped lang="less">
  .tiktok-title{
    padding:  0px 10px 30px;
    font-size: 20px;
    color: #000;
  }
  .row-cls{
    border-bottom: 1px solid #F0F2F5 ;
    margin-bottom: 24px
  }
  .screen-num{
    padding-bottom: 20px ;
    span{
      color: #666;
    }
    div{
      color: #1E6CEB;
      font-size: 24px;
      margin-top: 10px;
    }
  }
</style>

